import { useMemo } from 'react'
import styles from './index.module.less';
import ReactEcharts from 'echarts-for-react';
const colors = ['#0091FF', '#44D7B6', '#00FFFF', '#6f7de3', '#088DFF', '#FF916C', '#FF9933', '#9E5CFF', '#F88CFF'];
const Lines = ({
    data,
    legendShow = true,
    grid = {
        top: "15%",
        bottom: '10%',
        left: '1%',
        right: '1%',
    },
    splitLineShow = true,
    splitLineLineStyleType = 'dashed',
    yAxisAxisLabelFormatter = (value) => {
        return value
    },
    yAxisPosition = 'right',
    tooltipShow = 'false',
    tooltipFormatter = (params) => {
        // console.log('params', params)
        let today = null
        let yest = null
        let contStr = ``
        if (params && params.length) {
            // if (params.length == 1 && params[0].seriesName == "今日") {
            //     today = params[0].data
            // } else if (params.length == 1 && params[0].seriesName == "昨日") {
            //     yest = params[0].data
            // } else if (params.length > 1) {
            //     today = params[0].data
            //     yest = params[1].data
            // }
            contStr = params.map(it => {
                return `<div style="
                font-family: PingFang SC;
                font-size: .375rem;
                color: rgba(0, 0, 0, 0.65);
                display:flex;
                align-items:center;
                justify-content: space-between;
                "><div>${it.seriesName}：</div>
                <div>${it.data}</div>
                </div>  `
            })
        }
        let str1 = ` <div style="
        font-family: PingFang SC;
        font-size: .375rem;
        color: rgba(0, 0, 0, 0.65);
        display:flex;
        align-items:center;
        margin-bottom:.3875rem;
        justify-content: space-between;
        "><div>${params[0].name}</div>
        </div> `

        const htmlStr = `<div style="
        display:flex;
        flex-direction:column;
        justify-content: space-between;
        width:3.6875rem;
        background-color:#fff;
        box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1);
        border-radius: .375rem;
        padding:.3125rem .5625rem;
        box-sizing: border-box;
        ">

        `;
        let str2 = ` </div>`
        return htmlStr + str1 + contStr + str2;
    },
}) => {
    const { xAxis = [], lineData = [] } = data;

    let seriesData = [];
    const options = useMemo(() => {
        seriesData = lineData.map((item, index) => {
            return {
                name: item.name,
                type: "bar",
                symbolSize: 10,
                symbol: "none",
                itemStyle: {
                    width: 1,
                    color: colors[index],
                    normal: {
                        label: {
                            show: true, //开启显示
                            position: 'top', //在上方显示
                            textStyle: { //数值样式
                                color: 'rgb(21, 70, 106)',
                                fontSize: 10
                            }
                        }
                    }
                },
                data: item.value
            }
        }
        );
        return {
            tooltip: {
                show: tooltipShow,
                trigger: "axis",
                backgroundColor: 'rgba(30,144,255,0.7)',
                borderColor: '#1E90FF',
                triggerOn: "mousemove|click",
                borderWidth: 0,
                // alwaysShowContent: true,
                padding: 0,
                borderRadius: '.375rem',
                backgroundColor: 'rgba(0, 0, 0, 0)',
                confine: true,
                className: styles['echarts-tooltip'],
                textStyle: {
                    color: '#fff'
                },
                formatter: tooltipFormatter,
            },
            legend: {
                show: legendShow,
                align: 'right',
                left: '1%',//距离左边距
                itemWidth: 16,//图标宽
                itemHeight: 8,//图标高
                // icon:"arrow",
                // data: [
                //     {
                //         icon: "image://",
                //         name: lineData[0]?.name || ''
                //     },
                //     {
                //         icon: "image://",
                //         name: lineData[1]?.name || ''
                //     }
                // ],
                textStyle: {
                    color: "rgba(0, 0, 0, 0.5)",
                    fontSize: 12,
                },
            },
            grid: {
                ...grid,
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    axisLine: {
                        show: data.length > 0 ? true : false,
                        lineStyle: {
                            color: 'rgba(56, 145, 255, 0.4)',
                            width: 1
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(56, 145, 255, 0.4)',
                            width: 1
                        }
                    },
                    axisLabel: {
                        formatter: function (value) {
                            let valueTxt = '';
                            if (value.length > 16) {
                                valueTxt = value.substring(0, 16) + '...';
                            }
                            else {
                                valueTxt = value;
                            }
                            return valueTxt;
                        },
                        show: true,
                        textStyle: {
                            color: 'rgba(0, 0, 0, 0.65)',
                            fontSize: 12,
                            itemWidth: 60,
                        },
                    },
                    data: xAxis
                }],
            yAxis: {
                type: "value",
                position: yAxisPosition,//坐标轴位置，移至右边
                // min: 80,  //取0为最小刻度
                // max: 100, //取100为最大刻度
                minInterval: 1,
                splitLine: {
                    show: splitLineShow,
                    lineStyle: {
                        color: 'rgb(217, 217, 217)',
                        width: 1,
                        type: splitLineLineStyleType,
                    }
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: 'rgba(56, 145, 255, 0.4)',
                        width: 1
                    }
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: 'rgba(0, 0, 0, 0.65)',
                        fontSize: 12
                    },
                    formatter: yAxisAxisLabelFormatter
                }

            },
            series: seriesData
        };
    }, [data]);
    return (
        <div className={styles.echarts} id='chart'>
            <ReactEcharts
                style={{
                    position: 'absolute',
                    width: '100%',
                    height: '100%',
                }}
                option={options}
                opts={{ devicePixelRatio: 2 }}
            />
            {
                !xAxis.length && <div className={styles.noData}>暂无数据</div>
            }
        </div>
    );
}

export default Lines